﻿<!DOCTYPE html>
<html class="detailsHtml">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>安全警示室</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="icon" href="/frontEnd/images/favicon.ico">
		<link rel="stylesheet" href="/frontEnd/css/swiper.min.css">
		<link rel="stylesheet" type="text/css" href="/frontEnd/css/style.css" />
		<style type="text/css">
			.boxCenter {
				position: relative;
			}
			.gallery-top-box .swiper-container{width:1760px !important;height: 665px;}
			.gallery-thumbs-box .swiper-wrapper{width: 128px;height: 86px;}
		</style>
	</head>

	<body>
		<div class="boxCenter">
			<h1 class="title titImg"><a href="javascript:history.back(-1);"><img src="/frontEnd/images/return.png"/></a>禁止携带火种 </h1>
			<!-- Swiper -->
			<div class="gallery-top-box">
				<div class="swiper-container gallery-top">
					<div class="swiper-wrapper">
						<div class="swiper-slide" data-id="1"> <img src="/frontEnd/images/a1.png"> </div>
						<div class="swiper-slide" data-id="2"> <img src="/frontEnd/images/a2.png"> </div>
						<div class="swiper-slide" data-id="3"> <img src="/frontEnd/images/a3.png"> </div>
						<div class="swiper-slide" data-id="4"> <img src="/frontEnd/images/a4.png"> </div>
						<div class="swiper-slide" data-id="5"> <img src="/frontEnd/images/a5.png"> </div>
						<div class="swiper-slide" data-id="6"> <img src="/frontEnd/images/a6.png"> </div>
					</div>
					<div class="swiper-scrollbar"></div>
				</div>
				<div class="swiper-button-prev"></div>
				<div class="swiper-button-next"></div>
			</div>
			<div class="gallery-thumbs-box">
				<div class="swiper-container gallery-thumbs">
					<div class="swiper-wrapper">
						<div class="swiper-slide" data-id="1"> <img src="/frontEnd/images/a1.png"> </div>
						<div class="swiper-slide" data-id="2"> <img src="/frontEnd/images/a2.png"> </div>
						<div class="swiper-slide" data-id="3"> <img src="/frontEnd/images/a3.png"> </div>
						<div class="swiper-slide" data-id="4"> <img src="/frontEnd/images/a4.png"> </div>
						<div class="swiper-slide" data-id="5"> <img src="/frontEnd/images/a5.png"> </div>
						<div class="swiper-slide" data-id="6"> <img src="/frontEnd/images/a6.png"> </div>
					</div>
				</div>
				<div class="swiper-button-prev"></div>
				<div class="swiper-button-next"></div>
			</div>
			<!-- Swiper -->
		</div>

		<script src="/frontEnd/js/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>
		<script src="/frontEnd/js/swiper.min.js"></script>
		<script>
			//图片等比例
			galleryTopHeight()
			$(window).resize(function() {
				galleryTopHeight()
			})

			var galleryTop = new Swiper('.gallery-top-box .gallery-top', {
				centeredSlides: true,
				autoplay: {
					delay: 4000,
					disableOnInteraction: false
				},
				slidesPerView: 'auto',
				spaceBetween: 10,
				navigation: {
					nextEl: '.gallery-top-box .swiper-button-next',
					prevEl: '.gallery-top-box .swiper-button-prev',
				},
				scrollbar: {
					el: '.swiper-scrollbar',
					hide: false,
					draggable: true,
					dragSize: 150,
				}
			});

			$(".slideshow").click(function() {
				if($(this).hasClass("pauseed")) {
					//播放
					$(this).removeClass("pauseed")
					galleryTop.autoplay.start()
				} else {
					//暂停
					$(this).addClass("pauseed")
					galleryTop.autoplay.stop()

				}
			})

			galleryTop.scrollbar.$el.css({
				"bottom": "0px",
				"background": "none",
				"height": "5px"
			});
			galleryTop.scrollbar.$dragEl.css({
				'background': 'rgba(171,171,171,171.6)'
			});
			galleryTop.scrollbar.updateSize();

			var galleryThumbs = new Swiper('.gallery-thumbs-box .gallery-thumbs', {
				spaceBetween: 10,
				slidesPerView: 'auto',
				touchRatio: 0.2,
				navigation: {
					nextEl: '.gallery-thumbs-box .swiper-button-next',
					prevEl: '.gallery-thumbs-box .swiper-button-prev',
				}
			});

			galleryTop.controller.control = galleryThumbs;

			<!--注意添加objThumbs,objTop对应的索引值1 ~ N -->
			var objThumbs = $(".gallery-thumbs .swiper-wrapper .swiper-slide");
			var objTop = $(".gallery-top .swiper-wrapper .swiper-slide");
			objThumbs.click(function(e) {
				var currentId = $(this).attr("data-id");
				for(var i = 0; i < objTop.length; i++) {
					if($(objTop[i]).attr("data-id") === currentId) {
						$(objTop[i - 1]).addClass("swiper-slide-prev")
						$(objTop[i - 1]).siblings().removeClass("swiper-slide-prev")
						$(objTop[i]).addClass("swiper-slide-active")
						$(objTop[i]).siblings().removeClass("swiper-slide-active")
						$(objTop[i + 1]).addClass("swiper-slide-next")
						$(objTop[i + 1]).siblings().removeClass("swiper-slide-next")
						e.preventDefault();
						galleryTop.slideTo(i, 1000, false);
					}
				}
			})

			function galleryTopHeight() {
				//处理图片比例
				var wh = $(window).height();
				var headernav_height = $(".headernav").height()
				var footernav_height = $(".footernav").height()
				var galleryThumbs_height = $(".gallery-thumbs").height()
				var galleryTop_height = wh - galleryThumbs_height - headernav_height - footernav_height - 22
				$(".gallery-top").css("height", galleryTop_height)
				//缩略图
				var galleryThumbs_width = $(window).width() - 60
				$(".gallery-thumbs-box .swiper-container").css("width", galleryThumbs_width)
				//大图
				var galleryTop_width = $(window).width() - 80
				$(".gallery-top-box .swiper-container").css("width", galleryTop_width)
			}
		</script>

	</body>

</html>